<template>
    <svg id="vital-line-block">
      <template v-for="(item, i) in vitalLineBlock" :key="i">
        <line v-if="item.type === 'line'" v-bind="item" />
        <SymbolSvg v-else-if="item.type === 'symbol'" :config="item" />
      </template>
    </svg>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import SymbolSvg from '../common/SymbolSvg.vue';
  
  // 定义组件的 props
  const props = defineProps({
    config: Object
  });
  
  // 解析线上降温、升高线上体温、疼痛缓解、处理后的疼痛强度、物理降温 等特殊线条
  const parseVitalLineBlock = () => {
    let { config, data, items, scale, unit, split, ...otherProps } = props.config;
    
    items = props.config.showData.items;

    scale = 1;
    unit = "mm"

    const vitalLineBlockToConfig = config['vitalLineBlockToConfig'] || {};
    const linePenIdToStyle = config['linePenIdToStyle'] || {};
    const symbolIdToStyle = config['symbolIdToStyle'] || {};
    const vitalShowToConfig = config['vitalShowToConfig'] || {};
    let vitalLineBlockSvg = [];
    let keyToVitalLineBlock = {};
  
    let localItems = items || [];
    let feverData = localItems.filter(f => {
      let attr = f['_attr'];
      return attr.vitalsigns === '发热';
    }).map(m => m = m['_attr']);
  
    // 获取符合绘制条件的数据
    for (let i = 0; i < localItems.length; i++) {
      let attr = localItems[i]['_attr'];
      let { vitalsigns, vitalsignsvalues, cellindex, disScale, ...other } = attr;
      if (vitalLineBlockToConfig[vitalsigns]) {
        if (!keyToVitalLineBlock[vitalsigns]) {
          keyToVitalLineBlock[vitalsigns] = [];
        }
        let nameShowConfig = vitalShowToConfig[vitalsigns] || {};
        if (disScale !== undefined && nameShowConfig.columnsInDay) {
          cellindex = disScale * (7 * nameShowConfig.columnsInDay);
        }
        keyToVitalLineBlock[vitalsigns].push({
          config: vitalLineBlockToConfig[vitalsigns],
          data: attr,
          value: vitalsignsvalues,
          cellIndex: cellindex,
          ...other
        });
      }
    }
  
    // 按从小到大排序
    for (let name in keyToVitalLineBlock) {
      let list = keyToVitalLineBlock[name];
      list = list.sort((a, b) => {
        return a.cellIndex - b.cellIndex;
      });
      keyToVitalLineBlock[name] = list;
    }
  
    // 绘制线条
    for (let name in keyToVitalLineBlock) {
      let pointData = keyToVitalLineBlock[name];
      let config = vitalLineBlockToConfig[name];
      for (let i = 0; i < pointData.length; i++) {
        let point = pointData[i];
        let { vitalsignsoriginalvalues, vitalsignsvalues, ...other } = point.data;
        let baseValue = config['base-value']; // 初始值
        let curScale = config['scale']; // 每个小格所占刻度
        let symbolId = config['symbol']; // 符号id
        let penId = config['pen-id'];
        let penStyle = linePenIdToStyle[penId] || {};
        let styleColor = penStyle['color'];
        let styleWidth = penStyle['pen-width'];
        let penSolid = penStyle['pen-style']; // pen-style： 画数据线的样式（1为实线、2为虚线）
        let disConfigCx = !split ? config.cx / 2 : 0;
  
        if (vitalsignsvalues && vitalsignsvalues.indexOf('V') > -1) {
          vitalsignsvalues = vitalsignsvalues.replace('V', '');
        }
  
        let vitalsignsvaluesShow = vitalsignsvalues;
        let vitalsignsoriginalvaluesShow = vitalsignsoriginalvalues;
        let feverFlag = false;
        if (name === '物理降温' || true) {
          // 物理降温时， vitalsignsvalues降温后, vitalsignsoriginalvalues 降温前，
          let temp = vitalsignsvalues;
          vitalsignsvalues = vitalsignsoriginalvalues;
          vitalsignsoriginalvalues = temp;
  
          vitalsignsvaluesShow = vitalsignsvalues;
          vitalsignsoriginalvaluesShow = vitalsignsoriginalvalues;
          feverFlag = !!feverData.filter(item => item.date === point.date).length;
        }
  
        // 特殊处理的部分
        let maxValue = config['max-value']; // 最大值
        let showMaxValue = config['show-max-value']; // 超过最大值显示位置
        let minValue = config['min-value']; // 最小值
        let showMinValue = config['show-min-value']; // 低于最小值显示位置
  
        if (vitalsignsvaluesShow > maxValue) {
          vitalsignsvaluesShow = showMaxValue;
        }
        if (vitalsignsvaluesShow < minValue) {
          vitalsignsvaluesShow = showMinValue;
        }
        if (vitalsignsoriginalvaluesShow > maxValue) {
          vitalsignsoriginalvaluesShow = showMaxValue;
        }
        if (vitalsignsoriginalvaluesShow < minValue) {
          vitalsignsoriginalvaluesShow = showMinValue;
        }
  
        let x1 = config.x + disConfigCx + config.cx * point.cellIndex + (feverFlag ? 2 : 0);
        let y1 = config.y - (vitalsignsvaluesShow - baseValue) / curScale * config.cy;
        let x2 = x1;
        let y2 = config.y - (vitalsignsoriginalvaluesShow - baseValue) / curScale * config.cy;
        vitalLineBlockSvg.push({
          type: 'line',
          x1: x1 * scale + unit,
          y1: y1 * scale + unit,
          x2: x2 * scale + unit,
          y2: y2 * scale + unit,
          style: {
            stroke: styleColor ? `rgba(${styleColor})` : 'rgba(0,0,0,1)',
            strokeWidth: styleWidth,
            strokeDasharray: penSolid === 2 ? "3,3" : undefined
          }
        });
  
        // 绘制符号
        let symbolStyle = symbolIdToStyle[symbolId] || {};
        vitalLineBlockSvg.push({
          ...symbolStyle,
          ...other,
          ...otherProps,
          type: 'symbol',
          vitalsignsvalues,
          vitalsignsoriginalvalues,
          unit,
          scale,
          x1,
          y1,
          config,
          name
        });
      }
    }
    return vitalLineBlockSvg;
  };
  
  // 计算属性，用于获取解析后的 vitalLineBlock 数据
  const vitalLineBlock = computed(() => {
    let vitalLineBlockData = parseVitalLineBlock();

    console.log("vitalLineBlock",vitalLineBlockData);
    return vitalLineBlockData;
  }
  );
  </script>
  
  <style scoped>
  /* 可添加样式 */
  </style>